<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib tagdir="/WEB-INF/tags/" prefix="util" %>

<util:template titulo="Usuario">
    <div class="row">
        <div class="col-md-9 col-md-offset-3">
            <form role="form" method="post" name="form-usuario" action="intranet/usuario/confirmar" 
                  enctype="multipart/form-data" onsubmit="return validateForm();">

                <div class="panel-heading">
                    <h1 class="panel-title"><c:if test="${not empty id}">Editar</c:if><c:if test="${empty id}">Adicionar</c:if> usuario</h1>
                    </div>
                    <div class="panel-body">
                    <c:if test="${not empty id}">
                        <input class="form-control" type="hidden" name="id" value="${id}">
                    </c:if>
                    <div class="row">
                        <div class="col-md-7">
                            <div class="form-group row">
                                <label for="login" class="col-md-4 control-label">Login</label>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" id="login" name="login" maxlength="20" value="${usuario.login}"
                                           style="width:200px" placeholder="Informe o login" required="true">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="senha" class="col-md-4 control-label">Senha</label>
                                <div class="col-md-3">
                                    <input type="password" class="form-control" id="senha" name="senha" maxlengh="20"
                                           style="width:200px" placeholder="Senha" required="true">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="confirmasenha" class="col-md-4 control-label">Confirmação senha</label>
                                <div class="col-md-3">
                                    <input type="password" class="form-control" id="confirmasenha" name="confirmasenha" maxlengh="20"
                                           style="width:200px" placeholder="Confirmar senha" required="true"
                                           onchange="return checaSenha();" >
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="nome" class="col-md-4 control-label">Nome</label>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" id="nome" name="nome" maxlengh="40" value="${usuario.nome}"
                                           style="width:350px" placeholder="Informe o nome" required="true">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="sobrenome" class="col-md-4 control-label">Sobrenome</label>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" id="sobrenome" name="sobrenome" maxlengh="40" value="${usuario.sobrenome}"
                                           style="width:350px" placeholder="Informe o sobrenome" required="true">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="email" class="col-md-4 control-label">Email</label>
                                <div class="col-md-3">
                                    <input type="email" class="form-control" id="email" name="email" maxlengh="40" value="${usuario.email}"
                                           style="width:350px" placeholder="Email">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="datanascimento" class="col-md-4 control-label">Data nascimento</label>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" id="datanascimento" name="datanascimento" maxlength="12" 
                                           style="width:180px" placeholder="dd/mm/aaaa"
                                           value="<fmt:formatDate pattern="dd/MM/yyyy" value="${usuario.dataNascimento}"/>"/>
                                </div>
                            </div>
                            <%--
                            Exibido somente se usuario administrador
                            --%>

                            <div class="form-group row">
                                <label for="departamento" class="col-md-4 control-label">Departamento</label>
                                <div class="col-md-3">
                                    <select class="form-control" name="departamento" maxlength="40"
                                            style="width:350px" required="true">
                                        <option value=''></option>
                                        <c:forEach items="${departamentos}" var="departamento">                                            
                                            <option value='${departamento.id}' 
                                                    <c:if test="${usuario.departamento.id eq departamento.id}">selected</c:if> >${departamento.nome}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                            </div>                                                          

                            <div class="form-group row">
                                <label for="grupo" class="col-md-4 control-label">Grupo</label>
                                <div class="col-md-3">
                                    <select class="form-control" name="grupo" maxlength="40" 
                                            style="width:350px" required="true">
                                        <option value=''></option>
                                        <c:forEach items="${grupos}" var="grupo">                                            
                                            <option value='${grupo.id}' 
                                                    <c:if test="${usuario.grupo.id eq grupo.id}">selected</c:if> >${grupo.nome}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                            </div>                            
                        </div>
                        <div class="col-md-2 col-md-offset-1">
                            <%--
                            <div class="col-md-12">
                                <a href="#">
                                    <img class="img-thumbnail img-responsive" id="imagem" name="imagem" style="height: 140px;" src='${usuario.caminhoFoto}' alt="Insira sua foto aqui" title="Insira sua foto aqui">                                    
                                </a>
                            </div>
                            --%>
                            <div class="col-md-12">
                                <!--<input type="file" class="btn btn-sm" id="caminho" onchange="carregaFoto();">-->
                                <input type="file" class="form-control" id="foto" name="foto" value="">
                            </div>
                        </div>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">Enviar</button>
                        <a class="btn btn-warning" href="${baseURL}/intranet/usuario/listar">Voltar</a>
                        <button type="reset" class="btn btn-default">Limpar</button>                       
                    </div>
                </div>
            </form>
        </div>
    </div>   

    <script>              
        function carregaFoto(){
            var caminho= document.getElementById("foto").value;                        
            document.getElementById("imagem").src=caminho;
        }
        function validateForm() {

            return checaSenha();
        }

        function checaSenha() {
            var senha = document.getElementById("senha").value;
            var confirmasenha = document.getElementById("confirmasenha").value;

            if (senha !== confirmasenha) {
                alert('Confirmação de senha não confere.');
                document.getElementById("confirmasenha").focus();
                return false;
            }
        }
    </script>                    
</util:template>